<template>
  <div class="home-container">
    <div class="hero-content">
      <h1 class="product-name">灵枢热链</h1>
      <p class="product-tagline">灵枢热链—智慧供热中枢，链动安全未来</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.9"
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
.home-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); // 深蓝到更深的蓝
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

.hero-content {
  text-align: center;
  padding: 2rem 3rem;
  transform: translateY(-70px);
}

.product-name {
  font-size: 8rem;
  font-weight: 900;
  color: #e74c3c; // 鲜明红色
  text-shadow: 
    0 0 10px rgba(231, 76, 60, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.3);
  margin-bottom: 1rem;
  letter-spacing: -0.05em;
  position: relative;
}

.product-tagline {
  font-size: 2rem;
  color: #ecf0f1; // 浅灰白
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 1.5rem;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>
